<template>
  <div ref="mapContainer" class="map-container"></div>
</template>

<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import type { EChartsType } from 'echarts';

const mapContainer = ref<HTMLElement | null>(null);
let chart: EChartsType | null = null;
let animationTimer: number | null = null;

// Mock logistics data
const logisticsData = [
  { from: [116.4074, 39.9042], to: [121.4737, 31.2304], value: 100 }, // Beijing to Shanghai
  { from: [116.4074, 39.9042], to: [113.2644, 23.1291], value: 80 },  // Beijing to Guangzhou
  { from: [121.4737, 31.2304], to: [113.2644, 23.1291], value: 120 }, // Shanghai to Guangzhou
  { from: [121.4737, 31.2304], to: [126.6439, 45.7575], value: 60 },  // Shanghai to Harbin
  { from: [113.2644, 23.1291], to: [104.0659, 30.6595], value: 90 },  // Guangzhou to Chengdu
  { from: [104.0659, 30.6595], to: [87.6177, 43.7928], value: 40 },   // Chengdu to Urumqi
  { from: [113.6654, 34.7573], to: [113.2644, 23.1291], value: 70 },  // Zhengzhou to Guangzhou
];

const convertData = (data: any[]) => {
  const res = [];
  for (let i = 0; i < data.length; i++) {
    const dataItem = data[i];
    res.push({
      fromName: dataItem[0],
      toName: dataItem[1],
      coords: [dataItem[0].coord, dataItem[1].coord]
    });
  }
  return res;
};

onMounted(() => {
  if (!mapContainer.value) return;
  
  chart = echarts.init(mapContainer.value);
  
  // Dynamically import china map
  fetch('https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000_full')
    .then(res => res.json())
    .then(geoJson => {
      echarts.registerMap('china', geoJson);
      initChart();
    })
    .catch(() => {
      // Fallback: just initialize chart without map registration
      initChart();
    });
});

const initChart = () => {
  if (!chart) return;
  
  const option = {
    backgroundColor: 'transparent',
    geo: {
      map: 'china',
      roam: true,
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      itemStyle: {
        areaColor: '#1c2940',
        borderColor: '#2d3f63',
        borderWidth: 1
      },
      emphasis: {
        itemStyle: {
          areaColor: '#2a3f5f'
        }
      }
    },
    series: [
      {
        type: 'lines',
        coordinateSystem: 'geo',
        zlevel: 2,
        effect: {
          show: true,
          period: 4,
          trailLength: 0.4,
          symbol: 'pin',
          symbolSize: 3
        },
        lineStyle: {
          color: '#4cd0d1',
          width: 1,
          opacity: 0.6,
          curveness: 0.2
        },
        data: logisticsData.map(item => ({
          coords: [item.from, item.to],
          lineStyle: {
            color: '#4cd0d1'
          }
        }))
      },
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 3,
        rippleEffect: {
          brushType: 'stroke',
          scale: 4
        },
        label: {
          show: false
        },
        symbolSize: function (val: any) {
          return val[2] / 20;
        },
        itemStyle: {
          color: '#ffde2e'
        },
        data: logisticsData.map(item => ({
          name: '',
          value: [...item.from, item.value]
        }))
      }
    ]
  };
  
  chart.setOption(option);
  
  // Add animation effect
  let dataIndex = 0;
  const animateLines = () => {
    if (!chart) return;
    
    chart.dispatchAction({
      type: 'linesSelect',
      seriesIndex: 0,
      dataIndex: dataIndex
    });
    
    dataIndex = (dataIndex + 1) % logisticsData.length;
    
    animationTimer = window.setTimeout(animateLines, 2000);
  };
  
  animateLines();
};

onBeforeUnmount(() => {
  if (chart) {
    chart.dispose();
  }
  if (animationTimer) {
    clearTimeout(animationTimer);
  }
});
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 12px;
}
</style>